<template>
  <view>
    <!-- 商品平铺渲染方式 -->
    <view class="goodsList">
      <view class="itemGoods" v-for="(item, index) in list" :key="index" @click="enterProduct(item, index)" v-if="index <= 7">
        <view class="gImg">
          <image mode="widthFix" v-if="navInfo.navName == '免税专供'"
            :src="item.listImgSecondUrl || item.listImgUrl || item.imgUrl"></image>
          <image mode="widthFix" v-else :src="item.hoverUrl || item.majorUrl"></image>
        </view>
        <view class="gTitle">
          <block v-if="navInfo.foreignId == 0">
            <block v-if="!!item.itemAssistantTitle && !!item.itemThirdTitle">
              <view class="ell">{{item.itemAssistantTitle}}</view>
              <view class="ell">{{item.itemThirdTitle}}</view>
            </block>
            <block v-else>
              <view class="ell2">{{item.itemName}}</view>
            </block>
          </block>
          <block v-else>
            <block v-if="!!item.subtitle && item.subtitle.indexOf(',') !== -1">
              <view class="ell">{{filterChecked.subTitleFormat(item.subtitle, 0)}}</view>
              <view class="ell">{{filterChecked.subTitleFormat(item.subtitle, 1)}}</view>
            </block>
            <block v-else>
              <view class="ell2">{{item.itemName}}</view>
            </block>
          </block>
        </view>
        <view class="gCapacity" :class="!!item.valueName || !!item.specification ? '' : 'trans'">
          容量:{{item.valueName || item.specification}}
        </view>
        <view class="gPrice" v-if="!!item.price">
          <label class="rmb">¥</label>{{filterChecked.moneyFormat(item.price / 1, 2)}}
        </view>
        <view class="gBtn">
          {{item | btnText}}
        </view>
      </view>
    </view>
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
  import {
    reportEvent,
    getEventIdByNavName,
    EVENT_ID
  } from '@/utils/ab-test.js';

  export default {
    props: {
      list: Array,
      navInfo: Object
    },
    // name:"itemsTileNew",
    data() {
      return {

      };
    },
    filters: {
      btnText(item) {
        let frontCustomParameters = item?.frontCustomParameters ? JSON.parse(item.frontCustomParameters) : {};
        let text;
        if (frontCustomParameters?.intentCheckMark && !frontCustomParameters?.privateSaleMark && item.frontQty < 1) {
          text = '意向登记'
        } else {
          text = '即刻选购'
        }
        return text
      },
    },
    mounted() {

    },
    methods: {
      enterProduct(item, index) {
        this.$commonSensors.PLPProductClick(item, index, this.navInfo.navName)
        reportEvent(EVENT_ID.CATEGORY.SHANG_CHENG);
        reportEvent(getEventIdByNavName(this.navInfo.navName));
        let path = this.navInfo.navName == "免税专供" ? '/pages/GTR/item?id=' + item.id : '/pages/item/item?id=' + item
          .itemId + '&valueId=' + item.valueId + '&hasExpose=true'
        uni.navigateTo({
          url: path
        })
      }
    }
  }
</script>

<style lang="less">
  .ell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ell2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .gName,
  .gName1 {
    line-height: 1;
    margin-bottom: 20rpx;
  }

  .gPrice {
    .rmb {
      font-size: 28rpx;
      margin-right: 4rpx;
    }
  }

  .trans {
    opacity: 0;
  }
</style>
